
<script setup name="AdmTeacherEdit">

import { ref, shallowRef, watchEffect, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import { ElTable, ElTableColumn, ElPagination, ElSelect, ElOption, ElDialog, ElMessage } from 'element-plus';
import { Search, Plus, Close, ArrowRight } from '@element-plus/icons-vue';
import service from '@/utils/request';


const router = useRouter();
const teacherOldData = router.currentRoute.value.query;
//导师新的信息
const teacherNewData = ref({
    newUserName: teacherOldData.name,
    newSchool: teacherOldData.department,
    newId: teacherOldData.jobId,
})

//表格信息
const tableData = ref([])// 表格数据
const pageNum = shallowRef(1); // 当前页码
const pageSize = shallowRef(5); // 每页显示的条数
const totalSize = shallowRef(0); // 总条数


//添加导师相关数据
const isShowAddStudent = shallowRef(false);// 是否显示添加学生对话框
const selectedContent = ref([]);// 选中的数据

const checkboxSearchValue = shallowRef('');// 搜索框的值
const breadcrumbData = ref([]);// 面包屑
const gradesMajorData = ref([]);// 学年级和专业所有数据

const getGradesData = () => {
    let temp = [];
    for (let i = 0; i < gradesMajorData.value.length; i++) {
        temp.push(gradesMajorData.value[i].grade);
    }
    return temp;    
}
const getMajorData = () => {
    let temp = [];
    for (let i = 0; i < gradesMajorData.value.length; i++) {
        if (gradesMajorData.value[i].grade === breadcrumbData.value[0]) {
            temp = gradesMajorData.value[i].majors;
            break;
        }
    }
    return temp;
}
const gradesData = ref([]);
const majorData = ref([]);
watchEffect(() => {
    gradesData.value = getGradesData();
})
const studentsCheckboxData = ref([]);


//选择学年级
const selectedYear = ref('');

//搜素框相关数据
const searchValue = shallowRef(''); // 搜索框的值
const searchRef = ref(null);// 右侧搜索框元素

onMounted(() => {
    // 添加全局点击事件监听器，处理表格操作链接
    document.addEventListener('click', handleGlobalClick);
});

const fixedTableData = (list) => {
    if (!list) return [];
    
    return list.map((item) => {
        return {
            grade: item.grade,
            name: item.username,
            id: item.id,
            department: item.school,
            state: item.state,
            operation:"解除关系"
        }
    })
}


const getTableData = (searchKey) => {
    service({
        method: "get",
        url: '/superadmin/teacher/getstudent',
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        params: {
            id: teacherOldData.jobId,
            condition: searchKey,
            grade: selectedYear.value,
            pageNum: pageNum.value,
            pageSize: pageSize.value
        }
    }).then((res) => {
        tableData.value = fixedTableData(res.data.list);
        totalSize.value = res.data.total || 0;
    }).catch((error) => {
        ElMessage({
            message: '获取数据失败',
            type: 'error',
        });
        tableData.value = [];
        totalSize.value = 0;
    })
}
getTableData('');

//编辑教师信息后点击保存
const saveClick = () => {
    if (!teacherNewData.value.newUserName || !teacherNewData.value.newId) {
        ElMessage.warning('请填写必要的教师信息');
        return;
    }
    service({
        method: "post",
        url: "/superadmin/teacher/changemessage",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: {
            oldId: teacherOldData.jobId,
            newId: teacherNewData.value.newId,
            newUserName: teacherNewData.value.newUserName,
            newSchool: teacherNewData.value.newSchool
        }
    }).then((res) => {
        //console.log(res);
        if (res.message === '请求正常') {
            //更新数据
            teacherOldData.name = teacherNewData.value.newUserName;
            teacherOldData.department = teacherNewData.value.newSchool;
            teacherOldData.jobId = teacherNewData.value.newId;
            ElMessage({
                message: '修改成功',
                type: 'success',
            });
        }else{
            ElMessage({
                message: '修改失败',
                type: 'error',
            });
        }
    })
}

// 搜索框聚焦和失焦事件
const handleSearchFocus = () => {
    if (searchRef.value) {
        searchRef.value.classList.add('search-focused');
    }
};

const handleSearchBlur = () => {
    if (searchRef.value) {
        searchRef.value.classList.remove('search-focused');
    }
}

const searchChange = () => {
    getTableData(searchValue.value);
}


//添加学生相关方法
//获得学生多选框的内容
const getcheckboxContent = () => {
    service({
        method: "post",
        url: "/superadmin/teacher/selectstudent",
        headers: { 
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
        data: {
            query: "",
            grade: breadcrumbData.value[0],
            major: breadcrumbData.value[1] 
        }
    }).then((res) => {
        //console.log(res);
        studentsCheckboxData.value = res.data.list || [];

    })
}

//添加学生的搜索框
const checkboxSearch = () => {
    if (checkboxSearchValue.value === '') return;
    service({
        method: "post",
        url: "/superadmin/teacher/selectstudent",
        headers: { 
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: {
            query: checkboxSearchValue.value,
            grade: "",
            major: "", 
        }
    }).then((res) => {
        if (!res.data.list || res.data.list.length === 0) {
            ElMessage({
                message: '未查询到相关学生',
                type: 'warning',
            });
            return;
        }
        studentsCheckboxData.value = res.data.list || [];
        breadcrumbData.value = [res.data.list[0]?.grade || '', res.data.list[0]?.major || ''];
        majorData.value = [];
        gradesData.value = [];
    })
}
//获得所有年级和专业
const getGradesMajorData = () => {
    service({
        method: "post",
        url: "/superadmin/teacher/grademajor",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
    }).then((res) => {
        //console.log(res);
        gradesMajorData.value = res.data;
    })
}
getGradesMajorData();

//点击面包屑导航
const breadcrumbClick = (item) => {
    if (item === breadcrumbData.value[0]) {
        breadcrumbData.value = [];
        majorData.value = [];
        studentsCheckboxData.value = [];
        gradesData.value = getGradesData();
    }
    if (item === breadcrumbData.value[1]) {
        breadcrumbData.value = breadcrumbData.value.slice(0, 1);
        majorData.value = getMajorData();
        studentsCheckboxData.value = [];
    }
}

//点击年级进入专业
const gradeClick = (item) => {
    breadcrumbData.value.push(item);
    majorData.value = getMajorData();
    gradesData.value = [];
}
//点击专业进入学生多选框
const majorClick = (item) => {
    breadcrumbData.value.push(item);
    majorData.value = [];
    getcheckboxContent();
}
//修改选中的数据
const fixedSelectedContent = (data) => {
    let temp = []
    data.forEach((item) => {
        temp.push(item.id)
    })
    return temp;
}
//点击添加学生
const addStudentClick = () => {
    if (selectedContent.value.length === 0) {
        ElMessage.warning('请选择要添加的学生');
        return;
    }
    
    const selectedData = fixedSelectedContent(selectedContent.value);
    //console.log(selectedData, teacherOldData.jobId);
    service({
        method: "post",
        url: "/superadmin/teacher/addstudent?teacherId=" + teacherOldData.jobId + "&studentId=" + selectedData.join(','),
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
    }).then((res) => {
        //console.log(res);
        if (res.message === "请求正常") {
            getTableData(searchValue.value);
            selectedContent.value = [];
            studentsCheckboxData.value = [];
            breadcrumbData.value = [];
            majorData.value = [];
            gradesData.value = getGradesData();
            isShowAddStudent.value = false;//关闭对话框
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '添加失败',
                type: 'error',
            });
        }
    })
}

const removeSelectedStudent = (item) => {
    const index = selectedContent.value.findIndex(i => i.id === item.id);
    if (index > -1) {
        selectedContent.value.splice(index, 1);
    }
}

const cancelAddStudent = () => {
    selectedContent.value = [];
    studentsCheckboxData.value = [];
    breadcrumbData.value = [];
    majorData.value = [];
    gradesData.value = getGradesData();
    isShowAddStudent.value = false;//关闭对话框
}

//选择年级相关
const selectYearChange = () => {
    getTableData(searchValue.value);
}

// 全局点击事件处理，用于优化表格操作点击
const handleGlobalClick = (event) => {
    const target = event.target;
    if (target.classList.contains('operation-link')) {
        const id = target.getAttribute('data-id');
        operationClick(null, { property: 'operation' }, null, { id });
    }
};

//点击表格解除关系
const operationClick = (row, column) => {
    if(column.property !== 'operation' || !row){
        return;
    }
    
    service({
        method: "post",
        url: "/superadmin/teacher/relieve",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
        params: {
            id: row.id
        }
    }).then((res) => {
        if (res.message === '请求正常') {
            getTableData(searchValue.value);
            ElMessage({
                message: '解除成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '解除失败',
                type: 'error',
            })
        }
    })
}

//底部分页器相关事件
const handleSizeChange = (data) => {
    pageNum.value = data
    getTableData(searchValue.value);
}
</script>

<template>
    <el-dialog
        draggable
    :model-value="isShowAddStudent"
    width="60vw"
    :show-close="false"
    destroy-on-close
    custom-class="add-student-dialog"
    :close-on-click-modal="false"
    >
    <template #header>
        <div class="addStudentHeader">添加学生</div>
    </template>
    <template #default>
        <div class="addStudentContent">
            <div class="left">
                <div class="search">
                    <div class="searchContent">
                        <input  
                        type="text" 
                        placeholder="搜索学生姓名"
                        @change="checkboxSearch"
                        v-model="checkboxSearchValue"
                        class="search-input"
                        />
                        <div class="icon search-icon" @click="checkboxSearch">
                            <el-icon><Search /></el-icon>
                        </div>                        
                    </div>
                </div>
                <div class="breadcrumb">
                    <div class="item" v-for="item in breadcrumbData" @click="breadcrumbClick(item)">
                        <span>{{ item }}</span>
                        <el-icon size="15"><ArrowRight /></el-icon>
                    </div>
                </div>  
                <div class="content">
                    <div v-if="gradesData.length !== 0" class="item" v-for="item in gradesData" @click="gradeClick(item)">
                        <div>{{ item }}</div>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                    <div v-if="majorData.length !== 0" class="item" v-for="item in majorData" @click="majorClick(item)">
                        <div>{{ item }}</div>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                    <div v-if="studentsCheckboxData && studentsCheckboxData.length !== 0" class="checkbox">
                        <el-checkbox-group v-model="selectedContent">
                            <div class="checkboxContent" v-for="item in studentsCheckboxData" :key="item.id">
                                <el-checkbox :value="item" class="student-checkbox">
                                    <div class="checkboxItem">
                                        <div class="name">{{ item.username }}</div>
                                        <div class="number">{{ item.id }}</div>
                                        <div class="department">{{ item.major }}</div>                            
                                    </div>
                                </el-checkbox>                                      
                            </div>
                        </el-checkbox-group>      
                    </div>
                </div>                    
            </div>
            <div class="right">
                <div class="rightHeader">已选择学生 ({{ selectedContent.length }})</div>
                <div class="rightContent">
                    <div class="rightItem" v-for="item in selectedContent" :key="item.id">
                        <span>{{ item.username }}</span>
                        <el-icon size="20" @click="removeSelectedStudent(item)" class="icon remove-icon"><Close /></el-icon>
                    </div>
                    <div v-if="selectedContent.length === 0" class="empty-selected">
                        暂无选择的学生
                    </div>
                </div>
                <div class="rightFooter">
                    <div class="cancel" @click="cancelAddStudent">取消</div>
                    <div class="add" @click="addStudentClick">添加</div>
                </div>
            </div>
        </div>
    </template>
    </el-dialog>
    <div class="TeacherTeacherEdit">
        <div class="header">
            <span @click="router.push('/superAdministrator/teacher')" class="breadcrumb-link">教师管理</span>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-current">教师信息</span>
        </div>
        <!-- 表格 -->
        <div class="layout">
            <div class="info card">
                <div class="infoHeader">教师信息</div>
                <div class="infoContent">
                    <div class="item">
                        <span class="title">姓名</span>
                        <input 
                        type="text" 
                        :placeholder="teacherOldData.name" 
                        v-model="teacherNewData.newUserName"
                        class="form-input"
                        >
                    </div>
                    <div class="item">
                        <span class="title">工号</span>
                        <input 
                        type="text" 
                        :placeholder="teacherOldData.jobId"
                        v-model="teacherNewData.newId"
                        class="form-input"
                        >
                    </div>
                    <div class="item">
                        <span class="title">学院</span>
                        <input 
                        type="text" 
                        :placeholder="teacherOldData.department"
                        v-model="teacherNewData.newSchool"
                        class="form-input"
                        >
                    </div>
                    <div class="save">
                        <div class="saveBtn" @click="saveClick">保存</div>
                    </div>
                </div>
            </div>
            <div class="dataTable card">
                <!-- 搜索框头部 -->
                <div class="tableHeader">
                    <div class="left">
                        <span>学生管理</span>
                    </div>
                    <div class="right" >
                        <div class="search" ref="searchRef" @focusin="handleSearchFocus" @focusout="handleSearchBlur">
                            <input 
                            v-model="searchValue" 
                            type="text" 
                            placeholder="搜索学生姓名"
                            @keyup.enter="searchChange"
                            class="search-input"
                            />
                            <el-icon class="icon search-icon"><Search /></el-icon>
                        </div>
                        <div class="selectYear">
                            <el-select 
                            v-model="selectedYear" 
                            placeholder="请选择年级" 
                            style="width: 130px;" 
                            @change="selectYearChange"
                            >
                            <el-option v-for="item in gradesData" :key="item" :value="item">{{ item }}</el-option>
                            </el-select>
                        </div>
                        <div class="addStudent" @click="isShowAddStudent = true">
                            <span>添加学生</span>
                            <el-icon><Plus /></el-icon>
                        </div>
                    </div>
                </div>
                <!-- 数据表格 -->
                <div class="tableContent">
                    <el-table
                    :data="tableData"
                    :style="{width: '100%'}"
                    height="100%"
                    show-overflow-tooltip
                    empty-text="暂无数据"
                    :header-cell-style="{color: '#000', background: '#f2f3f5'}"
                    @cell-click="operationClick"
                    class="student-table"
                    >
                        <el-table-column align="left" prop="name" label="姓名" width="150"></el-table-column>
                        <el-table-column align="left" prop="id" label="学号" width="150"></el-table-column>
                        <el-table-column align="left" prop="department" label="专业"></el-table-column>
                        <el-table-column align="center" prop="operation" label="操作" width="100">
                            <template #default="scope">
                                <span class="operation-link" :data-id="scope.row.id">{{ scope.row.operation }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 底部分页器 -->
                <div class="tableFooter">
                    <div class="left">
                        <div class="total">共计: {{ totalSize }} 条</div>
                    </div>
                    <div class="right">
                        <div class="pagination">
                            <el-pagination
                                v-model="pageNum"
                                layout="prev, pager, next"
                                :total="totalSize"
                                :page-size="pageSize"
                                background
                                size="small"
                                @current-change="handleSizeChange"
                            />
                        </div>
                        <div class="selector">
                            <el-select 
                            v-model="pageSize" 
                            placeholder="每页条数" 
                            style="width: 80px;" 
                            size="small"
                            @change="getTableData(searchValue);"
                            >
                                <el-option label="5条/页" :value="5"></el-option>
                                <el-option label="10条/页" :value="10"></el-option>
                                <el-option label="20条/页" :value="20"></el-option>
                            </el-select>
                        </div>
                        <div class="jump">
                            <span class="title">前往:</span>
                            <input type="text" v-model="pageNum" @change="getTableData(searchValue);" class="jump-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
// 变量定义
$primary-color: #4c5fbc;
$primary-hover: #3a4ba8;
$success-color: #4bc65f;
$danger-color: #f56c6c;
$warning-color: #e6a23c;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$border-color: #e4e7ed;
$border-light: #ebeef5;
$background-color: #f5f7fa;
$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
$transition: all 0.3s ease;

// 公共样式
.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: $box-shadow;
    transition: $transition;
    &:hover {
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
    }
}

.form-input {
    border: 1px solid $border-color;
    border-radius: 6px;
    padding: 8px 12px;
    transition: $transition;
    &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 3px rgba(76, 95, 188, 0.1);
        outline: none;
    }
}

.search-input {
    border: none;
    outline: none;
    background-color: transparent;
    text-indent: 10px;
    width: 100%;
    height: 100%;
}

// 添加学生对话框样式
.add-student-dialog {
    .el-dialog__body {
        padding: 20px;
    }
}

.addStudentHeader {
    font-size: 20px;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 10px;
}

.addStudentContent {
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: space-between;
    .left {
        width: 50%;
        padding-right: 15px;
        .search {
            height: 40px;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            .searchContent {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                border-radius: 6px;
                background-color: $background-color;
                border: 1px solid $border-color;
                transition: $transition;
                &:focus-within {
                    border-color: $primary-color;
                    background-color: #ffffff;
                    box-shadow: 0 0 0 3px rgba(76, 95, 188, 0.1);
                }
                .icon {
                    width: 40px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    color: $text-secondary;
                    transition: $transition;
                    &:hover {
                        color: $primary-color;
                    }
                }
            }
        }
        
        .breadcrumb {
            height: 40px;
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 13px;
            color: $text-primary;
            margin-bottom: 15px;
            .item {
                height: 25px;
                padding: 0 5px;
                margin-left: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: 1px solid $border-light;
                border-radius: 5px;
                transition: $transition;
                &:hover {
                    cursor: pointer;
                    border: 1px solid $primary-color;
                    color: $primary-color;
                }
            }
        }
        
        .content {
            width: 100%;
            height: calc(100% - 100px);
            padding: 0 10px;
            overflow: auto;
            
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            
            &::-webkit-scrollbar-thumb {
                background-color: #c0c4cc;
                border-radius: 3px;
                transition: $transition;
                
                &:hover {
                    background-color: #909399;
                }
            }
            
            &::-webkit-scrollbar-track {
                background-color: $background-color;
                border-radius: 3px;
            }
            
            .item {
                width: 100%;
                height: 40px;
                padding: 0 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid $border-light;
                transition: $transition;
                &:hover {
                    cursor: pointer;
                    background-color: #f8f9fa;
                    transform: translateX(2px);
                }
            }
            
            .checkbox {
                width: 100%;
                height: 100%;
                padding-right: 10px;
                overflow-y: auto;
                overflow-x: hidden;
                
                &::-webkit-scrollbar {
                    width: 6px;
                    height: 6px;
                }
                
                &::-webkit-scrollbar-thumb {
                    background-color: #c0c4cc;
                    border-radius: 3px;
                    transition: $transition;
                    
                    &:hover {
                        background-color: #909399;
                    }
                }
                
                &::-webkit-scrollbar-track {
                    background-color: $background-color;
                    border-radius: 3px;
                }
                
                .checkboxContent {
                    width: 100%;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid $border-light;
                    padding: 0 10px;
                    transition: $transition;
                    
                    &:hover {
                        background-color: #f8f9fa;
                        transform: translateX(2px);
                    }
                    
                    .student-checkbox {
                        width: 100%;
                        
                        .el-checkbox__label {
                            width: calc(100% - 20px);
                        }
                    }
                    
                    .checkboxItem {
                        height: 100%;
                        display: flex;
                        gap: 20px;
                        align-items: center;
                        line-height: 1.5;
                        
                        .name {
                            font-weight: 500;
                            color: $text-primary;
                        }
                        
                        .number {
                            color: $text-regular;
                        }
                        
                        .department {
                            width: 150px;
                            height: 100%;
                            color: $text-secondary;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }
    
    .right {
        width: 50%;
        border-left: 1px solid $border-color;
        padding-left: 15px;
        
        .rightHeader {
            height: 36px;
            padding-left: 10px;
            line-height: 36px;
            color: $text-primary;
            font-weight: 500;
            font-size: 16px;
            border-bottom: 2px solid $primary-color;
            margin-bottom: 15px;
        }
        
        .rightContent {
            height: calc(100% - 100px);
            padding: 0 10px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 10px;
            overflow: auto;
            
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            
            &::-webkit-scrollbar-thumb {
                background-color: #c0c4cc;
                border-radius: 3px;
                transition: $transition;
                
                &:hover {
                    background-color: #909399;
                }
            }
            
            &::-webkit-scrollbar-track {
                background-color: $background-color;
                border-radius: 3px;
            }
            
            .rightItem {
                width: 45%;
                height: 36px;
                padding: 8px 10px;
                border: 1px solid $border-light;
                border-radius: 6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                color: $text-primary;
                background-color: #fafafa;
                transition: $transition;
                
                &:hover {
                    border-color: $primary-color;
                    background-color: #ffffff;
                }
                
                .icon {
                    color: $text-secondary;
                    transition: $transition;
                    
                    &:hover {
                        color: $danger-color;
                    }
                }
            }
            
            .empty-selected {
                width: 100%;
                text-align: center;
                padding: 20px;
                color: $text-secondary;
                font-size: 14px;
            }
        }
        
        .rightFooter {
            width: 100%;
            height: 40px;
            padding-top: 10px;
            display: flex;
            justify-content: center;
            gap: 20px;
            
            div {
                width: 80px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6px;
                color: white;
                font-size: 14px;
                cursor: pointer;
                transition: $transition;
                font-weight: 500;
            }
            
            .add {
                background-color: $primary-color;
                
                &:hover {
                    background-color: $primary-hover;
                    transform: translateY(-1px);
                }
            }
            
            .cancel {
                background-color: $text-secondary;
                
                &:hover {
                    background-color: #707479;
                }
            }
        }
    }
}

.TeacherTeacherEdit {
    width: 100%;
    height: 100%;
    
    .header {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        color: $text-regular;
        border-bottom: 1px solid $border-color;
        background-color: #ffffff;
        .breadcrumb-link {
            cursor: pointer;
            transition: $transition;
            
            &:hover {
                color: $primary-color;
                font-weight: 600;
            }
        }
        
        .breadcrumb-separator {
            margin: 0 8px;
            color: $text-secondary;
        }
        
        .breadcrumb-current {
            color: $text-primary;
            font-weight: 500;
        }
    }
    
    .layout {
        width: 100%;
        height: calc(100% - 60px);
        padding: 20px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        .info {
            width: 100%;
            padding: 20px;
            
            .infoHeader {
                width: 100%;
                height: 40px;
                font-size: 18px;
                font-weight: 600;
                color: $text-primary;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid $primary-color;
            }
            
            .infoContent {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: 20px 0;
                
                .item {
                    width: 33%;
                    display: flex;
                    align-items: center;
                    padding-right: 20px;
                    
                    .title {
                        margin-right: 15px;
                        color: $text-regular;
                        font-weight: 500;
                        min-width: 60px;
                        &::before {
                            content: "*";
                            color: $danger-color;
                            margin-right: 4px;
                        }
                    }
                    
                    input {
                        flex: 1;
                        height: 36px;
                        border: 1px solid $border-color;
                        outline: none;
                        border-radius: 6px;
                        background-color: #ffffff;
                        color: $text-primary;
                        text-indent: 12px;
                        transition: $transition;
                        
                        &:focus {
                            border-color: $primary-color;
                            box-shadow: 0 0 0 3px rgba(76, 95, 188, 0.1);
                        }
                        
                        &::placeholder {
                            color: $text-secondary;
                        }
                    }
                }
                
                .save {
                    width: 100%;
                    margin-top: 10px;
                    display: flex;
                    justify-content: center;
                    
                    .saveBtn {
                        width: 120px;
                        height: 38px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 6px;
                        background-color: $primary-color;
                        color: #fff;
                        cursor: pointer;
                        font-size: 16px;
                        font-weight: 500;
                        transition: $transition;
                        
                        &:hover {
                            background-color: $primary-hover;
                            transform: translateY(-2px);
                            box-shadow: 0 4px 12px rgba(76, 95, 188, 0.3);
                        }
                        
                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
        
        .dataTable {
            width: 100%;
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            min-height: 400px;
            .tableHeader {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
                
                .left {
                    font-size: 18px;
                    font-weight: 600;
                    color: $text-primary;
                }
                
                .right {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    
                    .search {
                        width: 20vw;
                        height: 4vh;
                        display: flex;
                        align-items: center;
                        border-radius: 6px;
                        background-color: #f1f2f3;
                        transition: all 0.3s ease;
                        
                        &:hover {
                        background-color: #e0e1e2;
                        }
                        
                        &:focus-within {
                        outline: 2px solid $primary-color;
                        background-color: #ffffff !important;
                        box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
                        }
                        
                        input {
                        height: 100%;
                        width: 90%;
                        outline: none;
                        border: none;
                        background-color: transparent;
                        text-indent: 1em;
                        color: #8e96a0;
                        }
                        
                        .icon {
                        width: 10%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        color: #8e96a0;
                        
                        &:hover {
                            color: $primary-color;
                        }
                        }
                    }
                    .selectYear {
                    height: 36px;
                    display: flex;
                    align-items: center;
                    }
                    .addStudent {
                        width: 110px;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 5px;
                        border-radius: 6px;
                        background-color: $primary-color;
                        color: white;
                        font-size: 14px;
                        font-weight: 500;
                        cursor: pointer;
                        transition: $transition;
                        
                        &:hover {
                            background-color: $primary-hover;
                            transform: translateY(-2px);
                            box-shadow: 0 4px 12px rgba(76, 95, 188, 0.3);
                        }
                        
                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }
            .tableContent {
                flex: 1;
                overflow: hidden;

                border-radius: 6px;
                border: 1px solid $border-color;
                .teacher-table {
                    height: 100%;
                    
                    :deep(.el-table__row) {
                        transition: $transition;
                        
                        &:hover {
                            background-color: #f5f7fa;
                        }
                    }
                    
                    :deep(.el-table__header th) {
                        background-color: #fafafa !important;
                        font-weight: 600;
                        color: $text-primary;
                        border-bottom: 1px solid $border-light;
                    }
                    
                    :deep(.el-table__body td) {
                        padding: 12px 0;
                        border-bottom: 1px solid $border-light;
                    }
                    
                    .operation-link {
                        color: $primary-color;
                        cursor: pointer;
                        transition: $transition;
                        padding: 4px 8px;
                        border-radius: 4px;
                        
                        &:hover {
                            background-color: rgba(76, 95, 188, 0.1);
                            color: $primary-hover;
                            text-decoration: underline;
                        }
                    }
                }
            }
            
            .tableFooter {
                width: 100%;
                padding-top: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid $border-light;
                .left {
                    .total {
                        font-size: 14px;
                        color: $text-secondary;
                    }
                }
                
                .right {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    
                    .pagination {
                        margin-right: 0;
                    }
                    
                    .selector {
                        margin-right: 0;
                    }
                    
                    .jump {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        
                        .title {
                            font-size: 14px;
                            color: $text-regular;
                        }
                        
                        .jump-input {
                            width: 40px;
                            height: 28px;
                            text-align: center;
                            line-height: 28px;
                            border: 1px solid $border-color;
                            outline: none;
                            border-radius: 4px;
                            background-color: #ffffff;
                            color: $text-primary;
                            transition: $transition;
                            
                            &:focus {
                                border-color: $primary-color;
                                box-shadow: 0 0 0 2px rgba(76, 95, 188, 0.1);
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>